<template>
	<div>
		<div class="go_back">
			<img src="../assets/goback.png" alt="" @click="fanhui">
		</div>
		<div class="head_portrait">
			<img src="../assets/touxiang.png" alt="" ref="xiugaitouxiang" class="touxiang">
			<h4 v-show="show_name">{{ username }}</h4>
			<div class="updata_head_portrait">
				<input type="file" id="imgLocal" @change="change1($event)">
			</div>
			<input type="text" v-model="username" v-show="show_updata" @blur="updataName" class="new_name">
			<img src="../assets/updata.png" alt="" class="updata_usename" @click="updata_name">
		</div>
		<div class="content">
			<ul>
				<li @click="to_mycollects">
					<span>我的收藏</span>
					<img src="../assets/qianjin.png" alt="" v-show="NotCollected">
					<img src="../assets/qianjin.png" alt="" v-show="Collected">
				</li>
				<li>
					<span>消息中心</span>
					<img src="../assets/qianjin.png" alt="">
				</li>
			</ul>
		</div>
		<button @click="Log_out" class="tuichu"> 退出登录 </button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				username:'',
				show_name:true,
				show_updata:false,
				num:{},
				NotCollected:true,
				Collected:false,
				pic7:''
			}
		},
		mounted() {
			this.num = localStorage.getItem("userinfo")
			console.log(this.num)
			// console.log(this.$route.query.id)
			// console.log(this.$route.query.access_token)
			// console.log(this.$route.query.username)
			this.username = this.$route.query.username
			this.$refs.xiugaitouxiang.src = JSON.parse(localStorage.getItem("userinfo1")).src
		},
		watch:{
			pic7:function(){
				this.$refs.xiugaitouxiang.src = JSON.parse(localStorage.getItem("userinfo1")).src
			}
		},
		methods:{
			fanhui:function(){
				this.$router.push({
					path:'/'
				})
			},
			Log_out:function(){
				this.num = JSON.parse(localStorage.getItem("userinfo"))
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/logout',this.$qs.stringify({
					id:this.num.id,
					access_token:this.num.access_token
				}))
				.then((res)=>{
					console.log(res)
					if(res.data.info==="登出成功"){
						this.$router.push({
							path:'/login',
						})
						localStorage.clear()
					}
				})
			},
			updata_name:function(){
				this.show_name = false
				this.show_updata = true
			},
			// 修改用户名
			updataName:function(){
				this.num = JSON.parse(localStorage.getItem("userinfo"))
				console.log(this.num)
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/edit',this.$qs.stringify({
					id:this.num.id,
					access_token:this.num.access_token,
					username:document.querySelector('.new_name').value,
				}))
				.then((res)=>{
					console.log(res)
					this.show_name = true
					this.show_updata = false
				})
			},
			to_mycollects:function(){
				this.$router.push({
					path:'/mycollects'
				})
			},
			// 头像修改
			change1:function(e){
				console.log(e)
				let a = e.target.files[0]
				console.log(a)
				let file = new FormData()
				file.append('file',a)
				file.append('id',1210)
				file.append('access_token', JSON.parse(localStorage.getItem("userinfo")).access_token)
				this.$http.post(' http://chonghekj.com/daily/index.php/Home/user/uploadAvatar',file,{
					'Content-Type': 'multipart/from-data'
				})
				.then((res)=>{
					console.log(res)
					this.pic7 = 'http:chonghekj.com'+res.data.data
					localStorage.setItem('userinfo1',JSON.stringify({
						src:'http://chonghekj.com'+res.data.data
					}))
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.go_back{
		width: 30px;
		margin: 10px;
	}
	.head_portrait{
		width: 100%;
		height: 100px;
		text-align: center;
		position: relative;
		.touxiang{
			width: 65px;
			height: 65px;
			border-radius: 50%;
		}
		h4{
			font-size: 25px;
		}
		.updata_head_portrait{
			width: 30%;
			position: absolute;
			top: 20%;
			left: 38%;
			opacity: 0;
			input{
				width: 100%;
			}
		}
		.updata_usename{
			width: 24px;
			position: absolute;
			top: 72%;
			right: 3%;
		}
		.new_name{
			position: absolute;
			bottom: 4%;
			left: 25%;
		}
	}
	.content{
		margin-top: 20px;
		width: 100%;
		ul li{
			border-top: 1px solid #C8C9CC;
			display: flex;
			justify-content: space-between;
			span{
				margin-top: 10px;
			}
			img{
				margin-top: 3px;
			}
		}
	}
	.tuichu{
		position: fixed;
		bottom: 10%;
		left: 40%;
		padding: 5px;
		background: #BA3916;
		border-radius: 5px;
		color: #eeeeee;
	}
</style>
